<template>
  <div class="search-panel">
    <div class="search-left panel-content">
      <ul class="search-tabs">
        <li
          v-for="(tab, index) in tabs"
          :key="index"
          :class="{ active: currentTab === tab.en }"
          @click="currentTab = tab.en"
        >
          <i :class="['fa', tab.icon]"></i>{{ tab.name }}
        </li>
      </ul>
    </div>
    <div class="search-right panel-content">
      <keep-alive>
        <component :is="tabComponent"></component>
      </keep-alive>
    </div>
  </div>
</template>
<script>
import Hotel from "./Hotel";
import Plane from "./Plane";
import Train from "./Train";
export default {
  name: "SearchPanel",
  components: {
    Hotel,
    Plane,
    Train
  },
  data() {
    return {
      currentTab: "Hotel",
      tabs: [
        {
          en: "Hotel",
          name: "酒店",
          icon: "fa-building"
        },
        {
          en: "Plane",
          name: "机票",
          icon: "fa-plane"
        },
        {
          en: "Train",
          name: "火车票",
          icon: "fa-train"
        }
      ]
    };
  },
  computed: {
    tabComponent() {
      return this.currentTab;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/varibles.scss";
.search-panel {
  margin-top: 1.5em;
  position: absolute;
  z-index: 999;
  width: 40em;
  height: 20em;
  background-color: #fff;
  .panel-content {
    float: left;
  }
  .search-left {
    width: 6em;
    height: 100%;
    background-color: #eee;
  }
  .search-tabs {
    li {
      padding-left: 1em;
      line-height: 3;
      color: #666;
      cursor: pointer;
    }
    .active {
      border-right: 1px solid #fff;
      background-color: #fff;
      color: $blueColor;
    }
  }
}
</style>
